import React from "react";
import {Button, Card, Carousel, Descriptions, DescriptionsProps, Drawer, DrawerProps, Space} from 'antd';

interface detailType extends DrawerProps {
  current: API.PrincessListApi,
  activeTabKey: string,
  isAdmin: number,
  ordered: API.PrincessListApi[]
  handlerCardTabChange: (key: string) => void
  handlerClose: (type: string) => void,
  handlerPlaceAnOrder: (item: API.PrincessListApi) => void
  DrawerProps?: DrawerProps
}
const princessDetail: React.FC<detailType> = (
  {
    current,
    activeTabKey,
    isAdmin,
    ordered,
    handlerCardTabChange,
    handlerClose,
    handlerPlaceAnOrder,
    ...DrawerProps
  }: detailType
) => {
  const isExist = ordered.some(existing => existing?.id === current?.id)
  const imageStyle: React.CSSProperties = {
    height: '450px',
    color: '#fff',
    background: '#364d79',
  };

  const tabListNoTitle = [
    {
      key: 'basic',
      label: '基础信息',
    },
    {
      key: 'adept',
      label: '擅长技艺',
    },
    {
      key: 'achievement',
      label: '业绩展览',
    },
  ];

  const basicItems: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '姓名',
      children: current?.name,
    },
    {
      key: '2',
      label: '年龄',
      children: current?.age,
    },
    {
      key: '3',
      label: '性别',
      children: current?.gender === 1 ? '男' : '女',
    },
    {
      key: '4',
      label: '身高',
      children: current?.height,
    },
    {
      key: '5',
      label: '体重',
      children: current?.weight,
    },
    {
      key: '6',
      label: '胸围',
      children: current?.bra,
    },
    {
      key: '7',
      label: '价格',
      children: "￥" + current?.price,
      span: 2,
    },
    {
      key: '8',
      label: '服务时间',
      children: current?.service_hours,
      span: 2,
    },
    {
      key: '9',
      label: '个人简介',
      children: current?.description,
    },
  ]

  const contentListNoTitle: Record<string, React.ReactNode> = {
    basic: <Descriptions bordered items={basicItems} />,
    adept: <p>adept content</p>,
    achievement: <p>achievement content</p>,
  };

  return (
    <Drawer
      {...DrawerProps}
      onClose={() => handlerClose("detail")}
      extra={
        !isAdmin &&
        <Space>
          <Button
            type='primary'
            onClick={isExist ? () => {} : () => handlerPlaceAnOrder(current)}
            disabled={isExist}
          >
            {isExist ? '已下单' : '下单'}
          </Button>
        </Space>
      }
    >
      <Space
        style={{ width: '100%', height: '450px' }}
        align={"start"}
      >
        <Carousel
          autoplay={{ dotDuration: true }}
          autoplaySpeed={3000}
          arrows
          infinite={true}
          style={{ width: '350px', height: "100%" }}
        >
          <div>
            <h3 style={imageStyle}>1</h3>
          </div>
          <div>
            <h3 style={imageStyle}>2</h3>
          </div>
          <div>
            <h3 style={imageStyle}>3</h3>
          </div>
          <div>
            <h3 style={imageStyle}>4</h3>
          </div>
        </Carousel>

        <Card
          style={{ width: '800px', height: '100%' }}
          tabList={tabListNoTitle}
          activeTabKey={activeTabKey}
          onTabChange={handlerCardTabChange}
        >
          {contentListNoTitle[activeTabKey]}
        </Card>
      </Space>
    </Drawer>
  )
}

export default princessDetail
